<template>
    <div class="custom-tab-bar fx">
        <div
            class="item"
            :class="{ on: active === 'index' }"
            @click="$switchTab('index')"
        >
            <div class="icon fx jcc">
                <image src="@/static/tabs/001s.png" />
                <image src="@/static/tabs/001.png" />
            </div>
            <div class="txt fx jcc">首页</div>
        </div>
        <div
            class="item"
            :class="{ on: active === 'gerenzhongxin' }"
            @click="$switchTab('gerenzhongxin')"
        >
            <div class="icon fx jcc">
                <image src="@/static/tabs/004s.png" />
                <image src="@/static/tabs/004.png" />
            </div>
            <div class="txt fx jcc">个人中心</div>
        </div>
    </div>
</template>
<script>
import $ from '@/common'
export default {
    data() {
        return {};
    },
    props: {
        active: {
            default: "index",
            type: String,
        },
    },
    methods: {
        goOrder(active){
            $.setLocal('activeOrder',active)
            this.$switchTab('order')
        },
    },
    mounted() {},
};
</script>
<style lang="less" scoped>
.custom-tab-bar {
    width: 100%;
    height: 150rpx;
    background: #fff;
    position: fixed;
    bottom: 0;
    z-index: 199;
    border-top: 2rpx solid #e0e0e0;
    padding-bottom: 10rpx;
    .item {
        flex: 1;
        height: 140rpx;
        padding-top: 20rpx;
        image {
            width: 60rpx;
            height: 60rpx;
            &:nth-child(1) {
                display: none;
            }
            &:nth-child(2) {
                display: block;
            }
        }
        &.on {
            image:nth-child(1) {
                display: block;
            }
            image:nth-child(2) {
                display: none;
            }
            .txt{
                color: #05c162;
            }
        }
    }
    .mid {
        width: 120rpx;
    }
    .fabu {
        position: absolute;
        width: 80rpx;
        height: 80rpx;
        left: 50%;
        margin-left: -40rpx;
        image {
            width: 80rpx;
            height: 80rpx;
        }
    }
}
</style>